<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/css/main.css">

    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<#include "common/header.ftl"/>

<div class="content">
    <div class="title">
        <h5>欢迎您的到来</h5>
        <h3>好礼品我们造,用心做好产品</h3>
        <h4>We build good products and make good products.</h4>
    </div>

    <#-- 轮播图-->
    <div class="layui-carousel imgbox"  id="test1">
        <div carousel-item  class="imgH">
            <div><img style="width: 100%" src="/images/sy_banner1.jpg"></div>
            <div><img style="width: 100%" src="/images/sy_banner1.jpg"></div>
        </div>
    </div>

    <#--产品展示-->
    <div class="prod-show">
        <div class="layui-fluid">
            <div class="row layui-col-space12 layui-clear">
                <#-- 循环4份-->
                <#list 1..4 as i>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                        <div class="img-txt">
                            <img style="width: 100%;" src="/images/sy_img1.jpg" alt="">
                            <h3>食品包装</h3>
                        </div>
                    </div>
                </#list>
            </div>
        </div>
    </div>

    <div class="prod-descr">
        <div class="layui-fluid">
            <#list 1..4 as i>
                <div class="layui-row">
                    <div class="item layui-clear">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                            <img src="images/sy_img5.jpg" class="left-img">
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                            <div class="text">
                                <h3>优秀包装设计美学</h3>
                                <p>本公司专门为您打造定制的商品包装。本公司专门为您打造定制的商品包装。</p>
                                <a href="details.html">查看更多 ></a>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md8 bot-img-box">
                            <div class="bot-img">
                                <img src="/images/sy_img6.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </#list>
        </div>
    </div>
    <div class="Partner">
        <div class="title">
            <h3>合作伙伴</h3>
            <h4>cooperative partner</h4>
        </div>
        <div class="cont-box">
            <div class="layui-fluid">
                <div class="row layui-col-space20">
                    <#list 1..15 as i>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                            <h2>LOGO</h2>
                        </div>
                    </#list>
                </div>
            </div>
        </div>
    </div>



</div>


<script>
    layui.use(['carousel','jquery','element'],function(){
        var carousel = layui.carousel,$ = layui.$;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always'
            ,height:'auto'
            //,anim: 'updown' //切换动画方式
        });
        $('.app-header-menuicon').on('click',function(){
            $('.header-down-nav').toggleClass('down-nav')
        })
        var imgH = $('.imgbox div.layui-this').outerHeight();
        $('.imgH').css('height',imgH+'px')
        window.onresize = function () {
            var imgH = $('.imgbox div.layui-this').outerHeight();
            $('.imgH').css('height',imgH+'px')
        };

    });
</script>

<#include "common/footer.ftl"/>
</body>
</html>